<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:a="https://github.com/pylonide/pylon" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="../ppc.js"></script>
    </head>
    <body>
        <a:skin src="../skins.xml" media-path="../images/" icon-path="../icons/" />
        
        <a:appsettings debug="1" />
        
        <a:tree id="tree1" align="left-splitter" width="25%" height="200">
           <a:item caption="root">
              <a:item caption="first child" />
              <a:item id="myhook" caption="second child">
                       <a:item caption="lastchild" />
              </a:item>
           </a:item>
        </a:tree>
        
        <a:button onclick="addNode()" left="10" top="300">Add</a:button>
        
        <a:script>
            function addNode(){
                var item = new ppc.item({caption: "new child"});
                myhook.appendChild(item);
            }
        </a:script>
    </body>
</html>